<!DOCTYPE html>
<html class="insetting">
<head>
  <meta charset="UTF-8">
  <title>Clippy — CSS clip-path maker</title>
  <link rel="stylesheet" type="text/css" href="style.min.css">
  <link rel="shortcut icon" href="pics/favicon.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="pics/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="152x152" href="pics/apple-touch-icon-152x152.png">
  <link rel="icon" sizes="196x196" href="homescreen-196x196.png">
  <meta name="viewport" content="width=device-width">
</head>

    <div class="main">

      <header class="fade-content">
        <a href="http://bennettfeely.com/clippy">CSS clip-path maker</a>
        <a href="https://twitter.com/share" class="twitter-share-button" data-via="bennettfeely">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </header>

      <div class="demo-container fade-content">
        <section class="demo">
          <div id="box" class="box">
            <div class="shadowboard"></div>
            <div class="clipboard"></div>
            <div class="handles"></div>
          </div>
          <div class="custom-notice">
            <div><span class="touchy"></span> to add points <br>to custom polygon.</div>
          </div>
        </section>
      </div>

      <section class="dark-panel custom">
        <h2>Custom shape</h2>
        <button class="finish"></button>
      </section>

      <section class="dark-panel inset">
        <div class="flex">
          <h2>Round edges</h2>
          <input value="5% 20% 0 10%" class="inset-round" type="text">
        </div>
        <p>The <code>inset()</code> shape optionally allows values similar to <code>border-radius</code> for rounded edges. This new feature may be buggy in <span class="your-browser">your browser</span>.</p>
      </section>

      <section id="flickity" class="shapes horizontal gallery">
        <ul></ul>
      </section>

      <section class="clip-path" tabindex="-1">
        <div class="css-code code fade-content">
          <!-- <code class="ms block">-ms-clip-path: <span class="functions"></span>;</code> -->
          <code class="webkit block show">-webkit-clip-path: <span class="functions"></span>;</code>
          <code class="unprefixed block show">clip-path: <span class="functions"></span>;</code>
        </div>

        <button class="edit-in-codepen code"></button>
      </section>
    </div>

    <div class="side">
      <section class="dark-panel inset">
        <div class="flex">
          <h2>Round edges</h2>
          <input value="5% 20% 0 10%" class="inset-round" type="text">
        </div>
        <p>The <code>inset()</code> shape optionally allows values similar to <code>border-radius</code> for rounded edges. This new feature may be buggy in <span class="your-browser">your browser</span>.</p>
      </section>

      <section class="dark-panel custom">
        <h2>Custom shape</h2>
        <button class="finish"></button>
      </section>

      <section class="shapes vertical" tabindex="-1">
        <ul></ul>
      </section>

      <section class="options">
        <div class="grid panel flex fade-content">
          <h2>Prefix</h2>

          <input name="prefix" value="5" type="checkbox" id="webkit" checked>
          <label for="webkit">webkit</label>
        </div>

        <!--
          <div class="grid panel flex">
            <h2>Snap</h2>
            <input name="grid" checked value="1" type="radio" id="grid-none">
            <label class="joined" for="grid-none">None</label>

            <input name="grid" value="5" type="radio" id="grid-5">
            <label class="joined" for="grid-5">5<small>%</small></label>

            <input name="grid" value="10" type="radio" id="grid-10">
            <label class="joined" for="grid-10">10<small>%</small></label>

            <input name="grid" value="25" type="radio" id="grid-25">
            <label class="joined" for="grid-25">25<small>%</small></label>
          </div>
        -->

        <div class="grid panel flex fade-content">
          <h2>Demo Size</h2>
          <input id="demo_width" value="280" type="number">
            <h2>&times;</h2>
          <input id="demo_height" value="280" type="number">
        </div>

        <div class="grid panel fade-content">
          <h2>Demo Background</h2>

          <div class="backgrounds">
            <img src="pics/pittsburgh.jpg">
            <img src="pics/fierenze.jpg">
            <img src="pics/sparkler.jpg">
            <img src="pics/miami.jpg">
          </div>
            <input placeholder="Custom URL..." id="custom_url" type="url" name="background">

            <style id="custom_background"></style>

          <div class="flex shadowboard-toggle">
            <h2>Show outside clip-path</h2>
            <input name="prefix" type="checkbox" id="shadowboard-toggle">
            <label class="joined" for="shadowboard-toggle"></label>
          </div>
        </div>

        <div class="grid panel fade-content">
          <h2>About Clip Paths</h2>

          <p>The <code>clip-path</code> property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. </p>
          <p>CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.</p>
        </div>

        <a href="http://caniuse.com/#search=clip-path" class="grid panel browser-support permanent fade-content">
          <h2 class="block">Browser Support <small>caniuse.com</small></h2>

          <div class="table">
            <span class="icon chrome" data-version="24+"></span>
            <span class="icon safari" data-version="8+"></span>
            <span class="icon opera" data-version="15+"></span>
            <span class="icon ie unsupported" data-version=""></span>
            <span class="icon firefox" data-version="54+"></span>
          </div>
        </a>

        <div class="grid panel cite fade-content">
          <h2 class="block">Brought to you by Bennett Feely</h2>

          <div class="twitter">
            <a href="https://twitter.com/bennettfeely" class="twitter-follow-button" data-show-count="true">Follow @bennettfeely</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </div>

          <p>Find this project on <a href="https://github.com/bennettfeely/Clippy">Github</a>. <br>This demo uses <a href="http://draggabilly.desandro.com/">Draggabilly</a> by <a href="http://http://desandro.com/">Dave Desandro</a>.</p>
        </div>
      </section>
    </div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="draggabilly.min.js"></script>
<script src="dev/flickity.pkgd.min.js"></script>
<script src="dev/clip.js"></script>
 <script src="clip.min.js"></script>
</body>
</html>